Adding Graphics to a React App with D3 — Arrays, Collections, and Elements

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Arrays

We can use D3 to manipulate arrays.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const data = [20, 40, 60, 80, 100];
    console.log(d3.min(data));
    console.log(d3.max(data));
    console.log(d3.extent(data));
    console.log(d3.sum(data));
    console.log(d3.mean(data));
    console.log(d3.quantile(data, 0.5));
    console.log(d3.variance(data));
    console.log(d3.deviation(data));
  }, []);

return <div className="App"></div>;
}

to computed various kinds of information with D3.

min returns the min value of the array.

max returns the max value of the array.

extent returns the min and max value of the array.

sum returns the sum of the array values.

mean returns the average of the array values.

quantile returns the given quantile.

variance returns the variance.

And deviation returns the standard deviation.

Collections

D3 can also work with objects.

To work with objects, we need the d3-collection library.

We run:

npm i d3-collections

to install the d3-collections library.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3-collection";

export default function App() {
  useEffect(() => {
    const month = { jan: 1, Feb: 2, mar: 3, apr: 4 };
    console.log(d3.keys(month));
    console.log(d3.values(month));
    console.log(d3.entries(month));
  }, []);

  return <div className="App"></div>;
}

Selecting Elements

We can select elements with D3.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    d3.select("p").style("color", "red");
  }, []);

  return (
    <div className="App">
      <p>hello</p>
    </div>
  );
}

to get the p element and set its color to red .

Also, we can chain the methods.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const b = d3.selectAll("p").selectAll("b");
    console.log(b);
  }, []);

  return (
    <div className="App">
      <p>
        <b>hello</b>
      </p>
    </div>
  );
}

to get the b element in the p element.

Also, we can get the tr elements with an even index by writing:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const even = d3.selectAll("tr").filter(":nth-child(odd)");
    console.log(even);
  }, []);

  return (
    <div className="App">
      <table>
        <tr>
          <td>foo</td>
        </tr>
        <tr>
          <td>bar</td>
        </tr>
        <tr>
          <td>baz</td>
        </tr>
      </table>
    </div>
  );
}

We can merge the selections with the merge method:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const width = 300;
    const height = 300;
    const svg = d3
      .select("#svgcontainer")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    const rect = svg
      .append("rect")
      .attr("x", 20)
      .attr("y", 20)
      .attr("width", 200)
      .attr("height", 100)
      .attr("fill", "green");

    const rect2 = svg
      .append("rect")
      .attr("x", 20)
      .attr("y", 20)
      .attr("width", 100)
      .attr("height", 100)
      .attr("fill", "blue");

    rect.enter().append("rect").merge(rect2);
  }, []);

  return (
    <div className="App">
      <div id="svgcontainer"></div>
    </div>
  );
}

We have 2 rectangles, rect and rect2 .

Then we have:

rect.enter().append("rect").merge(rect2);

to combine the 2 rectangles together.

Now we see the blue and green rectangles side by side.

Conclusion

We can work with arrays, objects, and DOM elements with D3 in React apps.